<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>后台博客管理</title>
    <link rel="stylesheet" href="../css/Element-ui.css" />
    <link rel="stylesheet" href="../css/TDesign.min.css" />
  </head>
  <body>
    <div id="app">
      <el-row>
        <el-col :span="4">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            active-text-color="#ff8200"
            @select="menuChange"
          >
            <img
              src="./img/weibo.jpg"
              alt=""
              style="width: 80%; margin-left: 20px"
            />
            <p style="font-size: 20px; text-align: center">
              新浪微博博客后台管理系统
            </p>
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">博客管理</span>
            </el-menu-item>

            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">热搜管理</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-document"></i>
              <span slot="title">待定导航</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">待定导航2</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="20">
          <el-table
            :data="BlogArr"
            style="width: 100%"
            v-show="selectIndex=='1'"
          >
            <el-table-column prop="id" label="数据库ID" width="90">
            </el-table-column>
            <el-table-column prop="username" label="博客作者" width="100">
            </el-table-column>
            <el-table-column label="博客头像" width="120">
              <template slot-scope="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.userImg"
                  :preview-src-list="[scope.row.userImg]"
                >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="上传时间"
            ></el-table-column>
            <el-table-column
              prop="follower"
              label="被关注数"
              width="100"
            ></el-table-column>
            <el-table-column prop="content" label="博客内容"></el-table-column>
            <el-table-column label="博客图片">
              <template slot-scope="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.contentImg"
                  :preview-src-list="[scope.row.contentImg]"
                >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="editBlog(scope.row)">编辑</el-button>
                <el-popconfirm
                  title="确定删除此博客数据吗？"
                  @confirm="() => { selectedBlog = scope.row; delBlog(); }"
                >
                  <el-button slot="reference">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <!-- 博客编辑dialog弹窗部分 -->
          <el-dialog
            title="博客编辑"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
          >
            <el-form label-width="100px">
              <el-form-item label="博客内容">
                <el-input
                  v-model="selectedBlog.content"
                  placeholder="请输入博客内容"
                />
              </el-form-item>
              <el-form-item label="博客图片外链">
                <el-input
                  v-model="selectedBlog.contentImg"
                  placeholder="请输入博客图片外链"
                />
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="updateBlog">确 定</el-button>
            </span>
          </el-dialog>
          <el-table
            :data="hotNewsArr"
            stripe
            style="width: 100%"
            v-show="selectIndex == '2'"
          >
            <el-table-column prop="id" label="数据库ID"> </el-table-column>
            <el-table-column prop="title" label="热搜新闻"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="editHotNews(scope.row)">编辑</el-button>
                <el-popconfirm
                  title="确定删除此热搜吗？"
                  @confirm="() => { selectedBlog = scope.row; delHotNews(); }"
                >
                  <el-button slot="reference">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <!-- 热搜dialog编辑弹窗部分 -->
          <el-dialog
            title="提示"
            :visible.sync="HotNewsdialogVisible"
            width="30%"
            :before-close="handleClose"
          >
            <el-form label-width="100px">
              <el-form-item label="热搜标题">
                <el-input
                  v-model="selectedHotNews.title"
                  placeholder="请输入热搜标题"
                />
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="HotNewsdialogVisible = false">取消</el-button>
              <el-button type="primary" @click="updateHotNews">确定</el-button>
            </span>
          </el-dialog>
        </el-col>
      </el-row>
    </div>
  </body>
  <script src="../js/axios.min.js"></script>
  <script src="../js/vue.min.js"></script>
  <script src="../js/Element-ui.min.js"></script>
  <script>
    let v = new Vue({
      el: "#app",
      data: function () {
        return {
          selectIndex: "1",
          BlogArr: [],
          hotNewsArr: [],
          visible: false,
          dialogVisible: false,
          HotNewsdialogVisible: false,
          selectedBlog: {},
          selectedHotNews: {},
        };
      },
      methods: {
        editHotNews(hotnews) {
          this.selectedHotNews = hotnews;
          this.HotNewsdialogVisible = true;
        },
        updateHotNews() {
          // 确保 selectedHotNews 包含有效的 id
          if (!this.selectedHotNews || !this.selectedHotNews.id) {
            console.error("未选择要更新的热搜或热搜 ID 无效");
            return;
          }

          // 构建 PUT 请求的 URL，包含要更新的热搜的 ID
          const url = `/admin/updateHotNews/${this.selectedHotNews.id}`;

          // 发送 PUT 请求
          axios.put(url, this.selectedHotNews).then((response) => {
            switch (response.data) {
              case 1:
                v.$message.success("更新成功");
                this.HotNewsdialogVisible = false;
                this.loadHotNews();
                break;
              default:
                v.$message.error("更新失败");
                break;
            }
          });
        },
        updateBlog() {
          axios
            .put(`/admin/UpdateBlog/${this.selectedBlog.id}`, this.selectedBlog)
            .then((response) => {
              const result = response.data;
              switch (result) {
                case 1:
                  v.$message.success("更新成功");
                  this.dialogVisible = false;
                  this.loadBlogs();
                  break;
                case 2:
                  v.$message.error("更新失败");
                  break;
                default:
                  v.$message.error("更新失败");
              }
            })
            .catch((error) => {
              v.$message.error("更新失败");
            });
        },

        loadBlogs() {
          axios.get("/admin/BlogArr").then((response) => {
            this.BlogArr = response.data;
          });
        },
        loadHotNews() {
          axios.get("/admin/HotNewsArr").then((response) => {
            this.hotNewsArr = response.data;
          });
        },
        menuChange(index) {
          this.selectIndex = index;
          switch (index) {
            case "3":
              v.$message.success("待定导航");
              break;
            case "4":
              v.$message.success("待定导航2");
              break;
          }
        },
        editBlog(blog) {
          this.selectedBlog = blog; // 设置当前选中的博客数据
          this.dialogVisible = true; // 显示弹窗
        },
        handleClose(done) {
          this.$confirm("确认关闭？")
            .then((_) => {
              done();
            })
            .catch((_) => {});
        },
        delHotNews() {
          axios
            .delete("/admin/deleteHotNews/" + this.selectedBlog.id)
            .then((response) => {
              switch (response.data) {
                case 1:
                  v.$message.success("删除成功");
                  this.loadHotNews();
                  break;
                default:
                  v.$message.error("删除失败");
                  break;
              }
            });
        },
        delBlog() {
          // 检查 this.selectedBlog 是否存在且包含有效的 id
          if (!this.selectedBlog || !this.selectedBlog.id) {
            console.error("未选择要删除的博客或博客 ID 无效");
            return;
          }

          // 构建 DELETE 请求的 URL
          const url = `/admin/DeleteBlog/${this.selectedBlog.id}`;

          // 发送 DELETE 请求
          axios
            .delete(url)
            .then((response) => {
              // 使用 response.data 来获取后端返回的结果
              const result = response.data;
              switch (result) {
                case 1:
                  this.$message.success("删除成功");
                  this.loadBlogs(); // 重新加载博客列表
                  break;
                default:
                  this.$message.error("删除失败");
                  // 在这里添加代码来处理删除失败的情况
                  break;
              }
            })
            .catch((error) => {
              console.error("请求失败", error);
              // 在这里添加处理请求失败的代码
              this.$message.error("请求失败，请稍后再试");
            });
        },
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
      },
      created() {
        axios.get("/admin/BlogArr").then(function (response) {
          v.BlogArr = response.data;
        });
        axios.get("/admin/HotNewsArr").then(function (response) {
          v.hotNewsArr = response.data;
        });
      },
    });
  </script>
</html>
